<template>
  <div class="life-page">
    <a-row :gutter="20">
      <a-col :xs="24" :sm="24" :md="24" :lg="18" :xl="18">
        <a-card>
          <div class="bread-box">
            <!-- 面包屑导航 -->
            <a-breadcrumb>
              <a-breadcrumb-item
                ><router-link to="/home">首页</router-link></a-breadcrumb-item
              >
              <a-breadcrumb-item>资源</a-breadcrumb-item>
            </a-breadcrumb>
          </div>
          <!-- 列表 -->
          <div class="life-box">
            <word-cloud-chart
              id="echarts05"
              :title="'标签云'"
              :data="echartsData"
            />
            <a-divider dashed />
            <Resource />
          </div>
        </a-card>
      </a-col>
      <a-col :xs="0" :sm="0" :md="0" :lg="6" :xl="6">
        <Author></Author>
      </a-col>
    </a-row>
  </div>
</template>

<script>
import Author from "../Author/Author";
import WordCloudChart from "./WordCloudChart";
import Resource from './Resource'

export default {
  data() {
    return {
      echartsData: [
        {
          name: "前端开发",
          value: 15000,
        },
        {
          name: "CSS3",
          value: 10081,
        },
        {
          name: "NestJS",
          value: 9386,
        },
        {
          name: "Vue",
          value: 7500,
        },
        {
          name: "React",
          value: 7500,
        },
        {
          name: "ES6",
          value: 6500,
        },
        {
          name: "TypeScript",
          value: 6500,
        },
        {
          name: "MongoDB",
          value: 6000,
        },
        {
          name: "MySQL",
          value: 4500,
        },
        {
          name: "性能优化",
          value: 3800,
        },
        {
          name: "异步",
          value: 3000,
        },
        {
          name: "微信小程序",
          value: 2500,
        },
        {
          name: "网络安全",
          value: 2300,
        },
        {
          name: "JavaScript",
          value: 2000,
        },
        {
          name: "HTML5",
          value: 1900,
        },
        {
          name: "Webpack",
          value: 1800,
        },
        {
          name: "Ant Design",
          value: 1700,
        },
        {
          name: "Element",
          value: 1600,
        },
        {
          name: "Less",
          value: 1500,
        },
        {
          name: "Electron",
          value: 1200,
        },
        {
          name: "serverless",
          value: 1100,
        },
        {
          name: "Hooks",
          value: 900,
        },
        {
          name: "PWA",
          value: 800,
        },
        {
          name: "SSR",
          value: 700,
        },
      ],
    };
  },
  components: {
    Author,
    WordCloudChart,
    Resource
  },
};
</script>

<style lang="less" scoped>
.life-page {
  padding: 63px 15px 0 15px;
  max-width: 1200px;
  margin: 0 auto;
}
.bread-box {
  padding-bottom: 15px;
  border-bottom: 1px solid #eee;
  margin-bottom: 20px;
}
@media screen and (max-width: 768px) {
  .life-page {
    padding: 0 15px;
  }
}
</style>